import React from 'react';
import {Flex, List, Icon, Card, WingBlank, WhiteSpace, Carousel, Toast, Modal, Button} from 'antd-mobile';
import Layout from '../../components/layout/layout';
import {Panel} from '../../components/index'
import './index.less';

const Item = List.Item;
const Brief = Item.Brief;

const Quota = ({history}) => {
  return (
    <Layout className={'page-quota'} history={history}>
      <Panel>
        <Flex className={'qBox'}>
          <div className={'qTitle'}>
            <div className={'tInfo'}>可用额度(元)</div>
            <div className={'tMoney'}>13,333.00</div>
          </div>
          <Flex className={'qbody'}>
            <Flex.Item>
              <Flex direction={'column'} align={"center"} justify={'center'}>
                <Flex.Item className={'text'}>总额度(元)</Flex.Item>
                <Flex.Item>20,000.00</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <Flex direction={'column'} align={"center"} justify={'center'}>
                <Flex.Item className={'text'}>已用额度(元)</Flex.Item>
                <Flex.Item>6,667.00</Flex.Item>
              </Flex>
            </Flex.Item>
          </Flex>
        </Flex>
      </Panel>
      <WhiteSpace/>
    </Layout>
  );
};

Quota.propTypes = {};

export default Quota;
